<template>
    <div class="interview-analysis-container">
      <!-- 顶部导航 -->
      <div class="analysis-header">
        <h1><i class="fas fa-chart-line"></i> 面试记录分析</h1>
        <p class="subtitle">基于您的历史面试数据进行综合分析</p>
      </div>
  
      <!-- 筛选控制 -->
      <div class="filter-controls">
        <div class="filter-group">
          <label for="time-range">时间范围:</label>
          <select id="time-range" v-model="selectedTimeRange" @change="filterInterviews">
            <option value="all">全部</option>
            <option value="month">最近1个月</option>
            <option value="3months">最近3个月</option>
            <option value="year">最近1年</option>
            <option value="custom">自定义</option>
          </select>
        </div>
  
        <div class="filter-group" v-if="selectedTimeRange === 'custom'">
          <label for="start-date">开始日期:</label>
          <input type="date" id="start-date" v-model="customStartDate">
          <label for="end-date">结束日期:</label>
          <input type="date" id="end-date" v-model="customEndDate">
        </div>
  
        <div class="filter-group">
          <label for="position">职位类型:</label>
          <select id="position" v-model="selectedPosition" @change="filterInterviews">
            <option value="all">全部</option>
            <option v-for="position in positions" :value="position" :key="position">{{ position }}</option>
          </select>
        </div>
  
        <div class="filter-group">
          <label for="company">公司类型:</label>
          <select id="company" v-model="selectedCompany" @change="filterInterviews">
            <option value="all">全部</option>
            <option v-for="company in companies" :value="company" :key="company">{{ company }}</option>
          </select>
        </div>
      </div>
  
      <!-- 主要分析内容 -->
      <div class="analysis-content">
        <!-- 概览卡片 -->
        <div class="overview-cards">
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-calendar-alt"></i>
            </div>
            <div class="card-content">
              <div class="card-value">{{ filteredInterviews.length }}</div>
              <div class="card-label">总面试次数</div>
            </div>
          </div>
  
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-star"></i>
            </div>
            <div class="card-content">
              <div class="card-value">{{ averageScore.toFixed(1) }}</div>
              <div class="card-label">平均得分</div>
            </div>
          </div>
  
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-check-circle"></i>
            </div>
            <div class="card-content">
              <div class="card-value">{{ successRate }}%</div>
              <div class="card-label">成功率</div>
            </div>
          </div>
  
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-clock"></i>
            </div>
            <div class="card-content">
              <div class="card-value">{{ averageDuration }}分钟</div>
              <div class="card-label">平均时长</div>
            </div>
          </div>
        </div>
  
        <!-- 得分趋势图 -->
        <div class="analysis-section">
          <div class="section-header">
            <h2><i class="fas fa-chart-line"></i> 得分趋势</h2>
            <div class="section-actions">
              <button class="chart-toggle" @click="toggleScoreChartType">
                {{ scoreChartType === 'line' ? '显示柱状图' : '显示折线图' }}
              </button>
            </div>
          </div>
          <div class="chart-container">
            <canvas ref="scoreTrendChart"></canvas>
          </div>
        </div>
  
        <!-- 能力维度对比 -->
        <div class="analysis-section">
          <div class="section-header">
            <h2><i class="fas fa-chart-radar"></i> 能力维度对比</h2>
            <div class="section-actions">
              <select v-model="selectedComparisonType">
                <option value="average">平均能力</option>
                <option value="first-last">首次 vs 最近</option>
                <option value="best-worst">最佳 vs 最差</option>
              </select>
            </div>
          </div>
          <div class="chart-container">
            <canvas ref="skillComparisonChart"></canvas>
          </div>
        </div>
  
        <!-- 面试记录列表 -->
        <div class="analysis-section">
          <div class="section-header">
            <h2><i class="fas fa-list-ul"></i> 详细记录</h2>
            <div class="section-actions">
              <button class="export-btn" @click="exportData">
                <i class="fas fa-download"></i> 导出数据
              </button>
            </div>
          </div>
          <div class="interview-table">
            <table>
              <thead>
                <tr>
                  <th @click="sortInterviews('date')">
                    日期 <i class="fas" :class="sortField === 'date' ? (sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'"></i>
                  </th>
                  <th @click="sortInterviews('position')">
                    职位 <i class="fas" :class="sortField === 'position' ? (sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'"></i>
                  </th>
                  <th @click="sortInterviews('company')">
                    公司 <i class="fas" :class="sortField === 'company' ? (sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'"></i>
                  </th>
                  <th @click="sortInterviews('score')">
                    得分 <i class="fas" :class="sortField === 'score' ? (sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'"></i>
                  </th>
                  <th @click="sortInterviews('duration')">
                    时长 <i class="fas" :class="sortField === 'duration' ? (sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'"></i>
                  </th>
                  <th @click="sortInterviews('result')">
                    结果 <i class="fas" :class="sortField === 'result' ? (sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'"></i>
                  </th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="interview in sortedInterviews" :key="interview.id">
                  <td>{{ formatDate(interview.date) }}</td>
                  <td>{{ interview.position }}</td>
                  <td>{{ interview.company }}</td>
                  <td>
                    <div class="score-display">
                      <div class="score-bar">
                        <div class="score-fill" :style="{ width: interview.score * 10 + '%' }"></div>
                      </div>
                      <span class="score-value">{{ interview.score.toFixed(1) }}</span>
                    </div>
                  </td>
                  <td>{{ interview.duration }}分钟</td>
                  <td>
                    <span class="result-badge" :class="interview.result === '通过' ? 'passed' : 'failed'">
                      {{ interview.result }}
                    </span>
                  </td>
                  <td>
                    <button class="view-btn" @click="viewInterview(interview.id)">
                      <i class="fas fa-eye"></i> 查看
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
  
        <!-- 改进建议 -->
        <div class="analysis-section">
          <div class="section-header">
            <h2><i class="fas fa-lightbulb"></i> 改进建议</h2>
          </div>
          <div class="improvement-content">
            <div class="improvement-card">
              <div class="improvement-header">
                <i class="fas fa-check-circle"></i>
                <h3>您的进步</h3>
              </div>
              <ul>
                <li v-for="(improvement, index) in improvements.progress" :key="index">{{ improvement }}</li>
              </ul>
            </div>
  
            <div class="improvement-card">
              <div class="improvement-header">
                <i class="fas fa-exclamation-circle"></i>
                <h3>持续改进</h3>
              </div>
              <ul>
                <li v-for="(suggestion, index) in improvements.suggestions" :key="index">{{ suggestion }}</li>
              </ul>
            </div>
  
            <div class="improvement-card">
              <div class="improvement-header">
                <i class="fas fa-chart-line"></i>
                <h3>趋势分析</h3>
              </div>
              <ul>
                <li v-for="(trend, index) in improvements.trends" :key="index">{{ trend }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 面试详情模态框 -->
      <div class="interview-modal" v-if="selectedInterview" @click.self="closeModal">
        <div class="modal-content">
          <button class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
          
          <div class="modal-header">
            <h2>{{ selectedInterview.position }}面试详情</h2>
            <div class="interview-meta">
              <span><i class="fas fa-building"></i> {{ selectedInterview.company }}</span>
              <span><i class="fas fa-calendar-day"></i> {{ formatDate(selectedInterview.date) }}</span>
              <span><i class="fas fa-stopwatch"></i> {{ selectedInterview.duration }}分钟</span>
              <span class="result-badge" :class="selectedInterview.result === '通过' ? 'passed' : 'failed'">
                {{ selectedInterview.result }}
              </span>
            </div>
          </div>
  
          <div class="modal-body">
            <div class="modal-section">
              <h3><i class="fas fa-chart-pie"></i> 能力评估</h3>
              <div class="skill-radar">
                <canvas ref="detailRadarChart"></canvas>
              </div>
            </div>
  
            <div class="modal-section">
              <h3><i class="fas fa-comment-alt"></i> 面试官反馈</h3>
              <div class="feedback-content">
                <p>{{ selectedInterview.feedback || '无详细反馈记录' }}</p>
              </div>
            </div>
  
            <div class="modal-section">
              <h3><i class="fas fa-question-circle"></i> 关键问题</h3>
              <div class="questions-list">
                <div v-for="(question, index) in selectedInterview.keyQuestions" :key="index" class="question-item">
                  <div class="question-text">
                    <strong>Q{{ index + 1 }}:</strong> {{ question.text }}
                  </div>
                  <div class="question-feedback">
                    <i class="fas" :class="question.evaluation === 'positive' ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
                    {{ question.feedback }}
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class="modal-footer">
            <button class="download-btn" @click="downloadInterviewReport(selectedInterview.id)">
              <i class="fas fa-download"></i> 下载报告
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Chart, registerables } from 'chart.js'
  Chart.register(...registerables)
  
  export default {
    name: 'InterviewAnalysis',
    data() {
      return {
        interviews: [
          {
            id: 1,
            date: '2023-11-15',
            position: '前端开发工程师',
            company: '科技公司A',
            score: 8.2,
            duration: 45,
            result: '通过',
            feedback: '候选人展现了扎实的前端基础，对Vue框架理解深入，但在系统设计方面还需加强。',
            skills: [
              { name: '技术能力', score: 9 },
              { name: '沟通表达', score: 8 },
              { name: '问题解决', score: 7.5 },
              { name: '系统设计', score: 6.5 },
              { name: '团队协作', score: 8 }
            ],
            keyQuestions: [
              {
                text: '请解释Vue的响应式原理',
                evaluation: 'positive',
                feedback: '回答全面准确，展示了深入的理解'
              },
              {
                text: '如何设计一个高并发的电商网站前端架构',
                evaluation: 'negative',
                feedback: '架构设计考虑不够全面，缺乏实践经验'
              }
            ]
          },
          // 更多面试记录...
        ],
        selectedTimeRange: 'all',
        customStartDate: '',
        customEndDate: '',
        selectedPosition: 'all',
        selectedCompany: 'all',
        scoreChartType: 'line',
        selectedComparisonType: 'average',
        sortField: 'date',
        sortOrder: 'desc',
        selectedInterview: null,
        scoreTrendChart: null,
        skillComparisonChart: null,
        detailRadarChart: null
      }
    },
    computed: {
      positions() {
        return [...new Set(this.interviews.map(i => i.position))]
      },
      companies() {
        return [...new Set(this.interviews.map(i => i.company))]
      },
      filteredInterviews() {
        let interviews = this.interviews
        
        // 时间范围筛选
        if (this.selectedTimeRange !== 'all') {
          const now = new Date()
          let startDate = new Date()
          
          switch (this.selectedTimeRange) {
            case 'month':
              startDate.setMonth(now.getMonth() - 1)
              break
            case '3months':
              startDate.setMonth(now.getMonth() - 3)
              break
            case 'year':
              startDate.setFullYear(now.getFullYear() - 1)
              break
            case 'custom':
              if (this.customStartDate) {
                startDate = new Date(this.customStartDate)
              } else {
                startDate = new Date(0) // 最早日期
              }
              break
          }
          
          interviews = interviews.filter(i => {
            const interviewDate = new Date(i.date)
            return interviewDate >= startDate && 
                   (!this.customEndDate || interviewDate <= new Date(this.customEndDate))
          })
        }
        
        // 职位筛选
        if (this.selectedPosition !== 'all') {
          interviews = interviews.filter(i => i.position === this.selectedPosition)
        }
        
        // 公司筛选
        if (this.selectedCompany !== 'all') {
          interviews = interviews.filter(i => i.company === this.selectedCompany)
        }
        
        return interviews
      },
      sortedInterviews() {
        const interviews = [...this.filteredInterviews]
        return interviews.sort((a, b) => {
          let valueA, valueB
          
          switch (this.sortField) {
            case 'date':
              valueA = new Date(a.date)
              valueB = new Date(b.date)
              break
            case 'position':
              valueA = a.position
              valueB = b.position
              break
            case 'company':
              valueA = a.company
              valueB = b.company
              break
            case 'score':
              valueA = a.score
              valueB = b.score
              break
            case 'duration':
              valueA = a.duration
              valueB = b.duration
              break
            case 'result':
              valueA = a.result
              valueB = b.result
              break
            default:
              valueA = a.date
              valueB = b.date
          }
          
          if (valueA < valueB) {
            return this.sortOrder === 'asc' ? -1 : 1
          }
          if (valueA > valueB) {
            return this.sortOrder === 'asc' ? 1 : -1
          }
          return 0
        })
      },
      averageScore() {
        if (this.filteredInterviews.length === 0) return 0
        const sum = this.filteredInterviews.reduce((acc, i) => acc + i.score, 0)
        return sum / this.filteredInterviews.length
      },
      successRate() {
        if (this.filteredInterviews.length === 0) return 0
        const passed = this.filteredInterviews.filter(i => i.result === '通过').length
        return Math.round((passed / this.filteredInterviews.length) * 100)
      },
      averageDuration() {
        if (this.filteredInterviews.length === 0) return 0
        const sum = this.filteredInterviews.reduce((acc, i) => acc + i.duration, 0)
        return Math.round(sum / this.filteredInterviews.length)
      },
      improvements() {
        const improvements = {
          progress: [],
          suggestions: [],
          trends: []
        }
        
        if (this.filteredInterviews.length < 2) {
          return {
            progress: ['数据不足，无法分析进步情况'],
            suggestions: ['继续积累面试经验，系统记录每次面试反馈'],
            trends: ['需要更多数据来识别趋势']
          }
        }
        
        // 分析进步
        const firstInterview = this.filteredInterviews[0]
        const lastInterview = this.filteredInterviews[this.filteredInterviews.length - 1]
        
        if (lastInterview.score > firstInterview.score) {
          improvements.progress.push(`您的面试得分从${firstInterview.score}提升到了${lastInterview.score}`)
        }
        
        // 分析建议
        const lowestSkill = this.getLowestSkill()
        if (lowestSkill) {
          improvements.suggestions.push(`需要加强${lowestSkill.name}方面的表现（平均得分${lowestSkill.score.toFixed(1)}）`)
        }
        
        // 分析趋势
        const scoreTrend = this.calculateScoreTrend()
        if (scoreTrend > 0) {
          improvements.trends.push(`您的面试得分呈现上升趋势（每月平均提升${scoreTrend.toFixed(1)}分）`)
        }
        
        return improvements
      }
    },
    methods: {
      filterInterviews() {
        // 过滤逻辑已在计算属性中实现
      },
      sortInterviews(field) {
        if (this.sortField === field) {
          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
        } else {
          this.sortField = field
          this.sortOrder = 'asc'
        }
      },
      toggleScoreChartType() {
        this.scoreChartType = this.scoreChartType === 'line' ? 'bar' : 'line'
        this.initScoreTrendChart()
      },
      viewInterview(id) {
        this.selectedInterview = this.interviews.find(i => i.id === id)
        this.$nextTick(() => {
          this.initDetailRadarChart()
        })
      },
      closeModal() {
        this.selectedInterview = null
      },
      formatDate(dateStr) {
        const date = new Date(dateStr)
        return date.toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'short',
          day: 'numeric'
        })
      },
      exportData() {
        alert('导出功能需要后端支持，此处仅为演示')
      },
      downloadInterviewReport(id) {
        alert(`下载面试${id}的报告功能需要后端支持`)
      },
      getLowestSkill() {
        if (this.filteredInterviews.length === 0) return null
        
        const skillMap = {}
        let count = 0
        
        this.filteredInterviews.forEach(interview => {
          interview.skills.forEach(skill => {
            if (!skillMap[skill.name]) {
              skillMap[skill.name] = { total: 0, count: 0 }
            }
            skillMap[skill.name].total += skill.score
            skillMap[skill.name].count++
          })
          count++
        })
        
        const avgSkills = Object.keys(skillMap).map(name => ({
          name,
          score: skillMap[name].total / skillMap[name].count
        }))
        
        return avgSkills.reduce((lowest, skill) => 
          !lowest || skill.score < lowest.score ? skill : lowest, null)
      },
      calculateScoreTrend() {
        if (this.filteredInterviews.length < 2) return 0
        
        const sorted = [...this.filteredInterviews].sort((a, b) => 
          new Date(a.date) - new Date(b.date))
        
        const firstDate = new Date(sorted[0].date)
        const lastDate = new Date(sorted[sorted.length - 1].date)
        
        const months = (lastDate.getFullYear() - firstDate.getFullYear()) * 12 + 
                      (lastDate.getMonth() - firstDate.getMonth())
        
        if (months === 0) return 0
        
        const scoreDiff = sorted[sorted.length - 1].score - sorted[0].score
        return scoreDiff / months
      },
      initScoreTrendChart() {
        if (this.scoreTrendChart) {
          this.scoreTrendChart.destroy()
        }
        
        const ctx = this.$refs.scoreTrendChart.getContext('2d')
        const labels = this.sortedInterviews.map(i => this.formatDate(i.date))
        const data = this.sortedInterviews.map(i => i.score)
        
        this.scoreTrendChart = new Chart(ctx, {
          type: this.scoreChartType,
          data: {
            labels,
            datasets: [
              {
                label: '面试得分',
                data,
                backgroundColor: this.scoreChartType === 'bar' ? 'rgba(52, 152, 219, 0.6)' : 'transparent',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
              }
            ]
          },
          options: {
            scales: {
              y: {
                beginAtZero: false,
                min: Math.max(0, Math.min(...data) - 1),
                max: Math.min(10, Math.max(...data) + 1)
              }
            },
            plugins: {
              tooltip: {
                callbacks: {
                  afterLabel: (context) => {
                    const interview = this.sortedInterviews[context.dataIndex]
                    return `职位: ${interview.position}\n公司: ${interview.company}\n结果: ${interview.result}`
                  }
                }
              }
            }
          }
        })
      },
      initSkillComparisonChart() {
        if (this.skillComparisonChart) {
          this.skillComparisonChart.destroy()
        }
        
        const ctx = this.$refs.skillComparisonChart.getContext('2d')
        let datasets = []
        let labels = []
        
        if (this.filteredInterviews.length > 0) {
          labels = this.filteredInterviews[0].skills.map(s => s.name)
          
          if (this.selectedComparisonType === 'average') {
            const skillMap = {}
            
            this.filteredInterviews.forEach(interview => {
              interview.skills.forEach(skill => {
                if (!skillMap[skill.name]) {
                  skillMap[skill.name] = { total: 0, count: 0 }
                }
                skillMap[skill.name].total += skill.score
                skillMap[skill.name].count++
              })
            })
            
            const avgData = labels.map(name => 
              skillMap[name] ? (skillMap[name].total / skillMap[name].count) : 0)
            
            datasets = [
              {
                label: '平均能力',
                data: avgData,
                backgroundColor: 'rgba(52, 152, 219, 0.2)',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(52, 152, 219, 1)'
              }
            ]
          } else if (this.selectedComparisonType === 'first-last' && this.filteredInterviews.length >= 2) {
            const first = this.filteredInterviews[0]
            const last = this.filteredInterviews[this.filteredInterviews.length - 1]
            
            datasets = [
              {
                label: '首次面试',
                data: first.skills.map(s => s.score),
                backgroundColor: 'rgba(231, 76, 60, 0.2)',
                borderColor: 'rgba(231, 76, 60, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(231, 76, 60, 1)'
              },
              {
                label: '最近面试',
                data: last.skills.map(s => s.score),
                backgroundColor: 'rgba(46, 204, 113, 0.2)',
                borderColor: 'rgba(46, 204, 113, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(46, 204, 113, 1)'
              }
            ]
          } else if (this.selectedComparisonType === 'best-worst' && this.filteredInterviews.length >= 2) {
            const best = [...this.filteredInterviews].sort((a, b) => b.score - a.score)[0]
            const worst = [...this.filteredInterviews].sort((a, b) => a.score - b.score)[0]
            
            datasets = [
              {
                label: '最佳表现',
                data: best.skills.map(s => s.score),
                backgroundColor: 'rgba(241, 196, 15, 0.2)',
                borderColor: 'rgba(241, 196, 15, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(241, 196, 15, 1)'
              },
              {
                label: '最差表现',
                data: worst.skills.map(s => s.score),
                backgroundColor: 'rgba(155, 89, 182, 0.2)',
                borderColor: 'rgba(155, 89, 182, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(155, 89, 182, 1)'
              }
            ]
          }
        }
        
        this.skillComparisonChart = new Chart(ctx, {
          type: 'radar',
          data: {
            labels,
            datasets
          },
          options: {
            scales: {
              r: {
                angleLines: {
                  display: true
                },
                suggestedMin: 0,
                suggestedMax: 10,
                ticks: {
                  stepSize: 2
                }
              }
            },
            plugins: {
              legend: {
                position: 'bottom'
              }
            }
          }
        })
      },
      initDetailRadarChart() {
        if (this.detailRadarChart) {
          this.detailRadarChart.destroy()
        }
        
        if (!this.selectedInterview) return
        
        const ctx = this.$refs.detailRadarChart.getContext('2d')
        const labels = this.selectedInterview.skills.map(s => s.name)
        const data = this.selectedInterview.skills.map(s => s.score)
        
        this.detailRadarChart = new Chart(ctx, {
          type: 'radar',
          data: {
            labels,
            datasets: [
              {
                label: '能力评分',
                data,
                backgroundColor: 'rgba(52, 152, 219, 0.2)',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(52, 152, 219, 1)'
              },
              {
                label: '合格线',
                data: labels.map(() => 7),
                backgroundColor: 'rgba(155, 155, 155, 0.1)',
                borderColor: 'rgba(155, 155, 155, 0.5)',
                borderWidth: 1,
                borderDash: [5, 5],
                pointRadius: 0
              }
            ]
          },
          options: {
            scales: {
              r: {
                angleLines: {
                  display: true
                },
                suggestedMin: 0,
                suggestedMax: 10
              }
            }
          }
        })
      }
    },
    mounted() {
      this.initScoreTrendChart()
      this.initSkillComparisonChart()
    },
    watch: {
      filteredInterviews() {
        this.initScoreTrendChart()
        this.initSkillComparisonChart()
      },
      selectedComparisonType() {
        this.initSkillComparisonChart()
      },
      scoreChartType() {
        this.initScoreTrendChart()
      }
    },
    beforeUnmount() {
      if (this.scoreTrendChart) this.scoreTrendChart.destroy()
      if (this.skillComparisonChart) this.skillComparisonChart.destroy()
      if (this.detailRadarChart) this.detailRadarChart.destroy()
    }
  }
  </script>
  
  <style scoped>
  .interview-analysis-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    color: #333;
    font-family: 'Segoe UI', 'PingFang SC', sans-serif;
  }
  
  .analysis-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #3498db;
  }
  
  .analysis-header h1 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .analysis-header .subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
  }
  
  .filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  
  .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .filter-group label {
    font-weight: 600;
    color: #2c3e50;
  }
  
  .filter-group select, .filter-group input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
  }
  
  .analysis-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
  }
  
  .overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .overview-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
    font-size: 1.5rem;
  }
  
  .card-content {
    flex: 1;
  }
  
  .card-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
  }
  
  .card-label {
    font-size: 0.9rem;
    color: #7f8c8d;
  }
  
  .analysis-section {
    margin-bottom: 3rem;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
  }
  
  .section-header h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
  }
  
  .section-header h2 i {
    margin-right: 0.8rem;
    color: #3498db;
  }
  
  .section-actions {
    display: flex;
    gap: 0.5rem;
  }
  
  .chart-toggle, .export-btn {
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #3498db;
    border-radius: 4px;
    color: #3498db;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
  }
  
  .chart-toggle:hover, .export-btn:hover {
    background-color: #f5f9fd;
  }
  
  .chart-container {
    height: 300px;
    margin-top: 1rem;
  }
  
  .interview-table {
    margin-top: 1rem;
    overflow-x: auto;
  }
  
  .interview-table table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .interview-table th, .interview-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
  }
  
  .interview-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    user-select: none;
  }
  
  .interview-table th:hover {
    background-color: #f0f3f5;
  }
  
  .interview-table th i {
    margin-left: 0.3rem;
  }
  
  .score-display {
    display: flex;
    align-items: center;
  }
  
  .score-bar {
    width: 80px;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-right: 0.5rem;
    overflow: hidden;
  }
  
  .score-fill {
    height: 100%;
    background-color: #3498db;
    border-radius: 4px;
  }
  
  .score-value {
    font-weight: bold;
    color: #2c3e50;
  }
  
  .result-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
  }
  
  .result-badge.passed {
    background-color: #e8f8f5;
    color: #27ae60;
  }
  
  .result-badge.failed {
    background-color: #fce8e8;
    color: #e74c3c;
  }
  
  .view-btn {
    padding: 0.3rem 0.8rem;
    background-color: #f0f7ff;
    border: 1px solid #3498db;
    border-radius: 4px;
    color: #3498db;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
  }
  
  .view-btn:hover {
    background-color: #e0f0ff;
  }
  
  .view-btn i {
    margin-right: 0.3rem;
  }
  
  .improvement-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
  }
  
  .improvement-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
  }
  
  .improvement-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .improvement-header h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin: 0;
  }
  
  .improvement-header i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
  }
  
  .fa-check-circle {
    color: #2ecc71;
  }
  
  .fa-exclamation-circle {
    color: #f39c12;
  }
  
  .improvement-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .improvement-card li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
  }
  
  .improvement-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
  }
  
  .interview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
  }
  
  .modal-content {
    background-color: white;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
  }
  
  .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #7f8c8d;
    cursor: pointer;
  }
  
  .close-btn:hover {
    color: #e74c3c;
  }
  
  .modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .modal-header h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .interview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: #7f8c8d;
  }
  
  .interview-meta span {
    display: flex;
    align-items: center;
  }
  
  .interview-meta i {
    margin-right: 0.3rem;
  }
  
  .modal-body {
    margin-top: 1rem;
  }
  
  .modal-section {
    margin-bottom: 2rem;
  }
  
  .modal-section h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
  }
  
  .modal-section h3 i {
    margin-right: 0.5rem;
  }
  
  .skill-radar {
    height: 250px;
  }
  
  .feedback-content {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
  }
  
  .feedback-content p {
    margin: 0;
    line-height: 1.6;
  }
  
  .questions-list {
    margin-top: 1rem;
  }
  
  .question-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #eee;
  }
  
  .question-item:last-child {
    border-bottom: none;
  }
  
  .question-text {
    margin-bottom: 0.5rem;
  }
  
  .question-feedback {
    display: flex;
    align-items: flex-start;
    font-size: 0.9rem;
    color: #7f8c8d;
  }
  
  .question-feedback i {
    margin-right: 0.5rem;
    margin-top: 0.2rem;
  }
  
  .modal-footer {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
  
  .download-btn {
    padding: 0.8rem 1.5rem;
    background-color: #3498db;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .download-btn:hover {
    background-color: #2980b9;
  }
  
  .download-btn i {
    margin-right: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .interview-analysis-container {
      padding: 1rem;
    }
    
    .analysis-header h1 {
      font-size: 1.8rem;
    }
    
    .filter-controls {
      flex-direction: column;
      gap: 1rem;
    }
    
    .filter-group {
      width: 100%;
    }
    
    .overview-cards {
      grid-template-columns: 1fr 1fr;
    }
    
    .improvement-content {
      grid-template-columns: 1fr;
    }
    
    .interview-table {
      font-size: 0.9rem;
    }
    
    .interview-table th, .interview-table td {
      padding: 0.5rem;
    }
    
    .modal-content {
      padding: 1.5rem;
    }
  }
  
  @media print {
    .interview-analysis-container {
      padding: 0;
    }
    
    .filter-controls, .section-actions, .modal-footer {
      display: none;
    }
    
    .analysis-section {
      page-break-inside: avoid;
    }
    
    .modal-content {
      width: 100%;
      max-width: 100%;
      height: auto;
      padding: 0;
      box-shadow: none;
      border-radius: 0;
    }
  }
  </style>
